<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
    <meta charset="UTF-8">
    <title>商品页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>

    <style>
        .comments {
            list-style-type: none;
            max-height: 500px;
        }

        .comments > li {
            padding: 5px;
            border-bottom: 1px solid #b9b9b9;
        }
    </style>
</head>
<body>
<!-- 加载header.html -->
<div th:include="user/header"></div>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <img
                    th:src="'images/' + ${goods.gpicture}"
                    style="height: 220px; width: 280px; display: block;">
        </div>
        <div class="col-xs-6 col-md-3">
            <p>商品名：<span th:text="${goods.gname}"></span></p>
            <p>
                商品折扣价：<span style="color: red;">&yen;
						<span th:text="${goods.grprice}"></span>
					</span>
            </p>
            <p>
                商品原价：
                <span class="text-dark" style="text-decoration: line-through;"> &yen;
						<span th:text="${goods.goprice}"></span>
					</span>
            </p>
            <p>
                商品类型：<span th:text="${goods.goodType.typename}"></span>
            </p>
            <p>
                库存：<span id="gstore" th:text="${goods.gstore}"></span>
            </p>
            <p>
                <input type="text" size="12" class="form-control" placeholder="请输入购买量" id="buyNumber" name="buyNumber"/>
                <input type="hidden" name="gid" id="gid" th:value="${goods.id}"/>
            </p>
            <p>
                <a href="javascript:focus()" class="btn btn-primary"
                   style="font-size: 10px;">加入收藏</a>
                <a href="javascript:putCart()" class="btn btn-success"
                   style="font-size: 10px;">加入购物车</a>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">商品评价</h3>
                </div>
                <div class="panel-body">
                    <ul class="comments">
                        <!--                        <li th:each="comment:${comments}">-->
                        <!--                            <div style="font-weight: bold;font-size: 16px;" th:text="${comment.bemail}"></div>-->
                        <!--                            <div th:text="${comment.create_time}"></div>-->
                        <!--                            <div th:text="${comment.content}"></div>-->
                        <!--                        </li>-->
                        <!--<li>
                            <div style="font-weight: bold;font-size: 16px;">1*******m</div>
                            <div>2020-0-0</div>
                            <div>解释：感谢您在茫茫天猫淘宝上选择了连环马，感谢您给我们做出的评价，每一句赞美的言词，每一句肯定的话语，都证明我们的努力和认真没有白费！交易虽然结束，服务仍在继续。我们会用最真诚的服务，最纯正的产品，给您百分百的服务。祝您每天都能拥有阳光般的好心情&#45;&#45;咱们家的产品都是精心为您设计的，力求让产品在外观美丽的同时，也能让顾客感受最舒适的手感！交易虽然结束，但服务还在继续，时间会证明，您选择我们不会错！我们永远会让您满意！ 感谢您对我们的支持，为方便您第一时间了解我们的最新优惠活动，请您抽空收藏我们店铺噢，祝您生活愉快!</div>
                        </li>
                        <li>
                            <div style="font-weight: bold;font-size: 16px;">1*******m</div>
                            <div>2020-0-0</div>
                            <div>解释：感谢您在茫茫天猫淘宝上选择了连环马，感谢您给我们做出的评价，每一句赞美的言词，每一句肯定的话语，都证明我们的努力和认真没有白费！交易虽然结束，服务仍在继续。我们会用最真诚的服务，最纯正的产品，给您百分百的服务。祝您每天都能拥有阳光般的好心情&#45;&#45;咱们家的产品都是精心为您设计的，力求让产品在外观美丽的同时，也能让顾客感受最舒适的手感！交易虽然结束，但服务还在继续，时间会证明，您选择我们不会错！我们永远会让您满意！ 感谢您对我们的支持，为方便您第一时间了解我们的最新优惠活动，请您抽空收藏我们店铺噢，祝您生活愉快!</div>
                        </li>
                        <li>
                            <div style="font-weight: bold;font-size: 16px;">1*******m</div>
                            <div>2020-0-0</div>
                            <div>解释：感谢您在茫茫天猫淘宝上选择了连环马，感谢您给我们做出的评价，每一句赞美的言词，每一句肯定的话语，都证明我们的努力和认真没有白费！交易虽然结束，服务仍在继续。我们会用最真诚的服务，最纯正的产品，给您百分百的服务。祝您每天都能拥有阳光般的好心情&#45;&#45;咱们家的产品都是精心为您设计的，力求让产品在外观美丽的同时，也能让顾客感受最舒适的手感！交易虽然结束，但服务还在继续，时间会证明，您选择我们不会错！我们永远会让您满意！ 感谢您对我们的支持，为方便您第一时间了解我们的最新优惠活动，请您抽空收藏我们店铺噢，祝您生活愉快!</div>
                        </li>-->

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    function putCart() {
        //获取商品Id
        var goodId = $("#gid").val();
        //获取商品数量
        var goodNum = $("#buyNumber").val();
        var url = "/cart/addCart";
        var param = {"goodId": goodId, "goodNum": goodNum};
        $.post(url, param, function (data) {
            if (data.state == 200) {
                alert(data.message);
                //跳转到购物车页面
                location.href = "/cart/cartList";
            } else {
                alert(data.message);
            }
        }, "json");
    }
</script>
</html>